<div class="pm-activity-wrap-header"></div>

<div class="pm-activity-wrap">
  <mat-card class="wrap-card">
    <div class="pm-activity-header">
      <div class="wa-title" style="margin-top: 0">
        <svg fill="#757575" style="margin: 1px -7px" height="48" viewBox="0 0 24 24" width="48"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path
            d="M3 5v6h5L7 7l4 1V3H5c-1.1 0-2 .9-2 2zm5 8H3v6c0 1.1.9 2 2 2h6v-5l-4 1 1-4zm9 4l-4-1v5h6c1.1 0 2-.9 2-2v-6h-5l1 4zm2-14h-6v5l4-1-1 4h5V5c0-1.1-.9-2-2-2z"/>
        </svg>
        <div class="wa-title-info">
          <div>
            <h3>{{projectDetail?.name}}</h3>
            <p mat-line>{{projectDetail?.createAt | date: 'short'}}</p>
          </div>
          <mat-chip-list class="wa-titleChips">
            <mat-chip>{{projectDetail?.status}}</mat-chip>
          </mat-chip-list>
        </div>
      </div>

      <button *ngIf="isOperateProject" mat-button color="warn" (click)="deleteProject()">删除</button>

    </div>

    <div class="pm-activity-body">
      <mat-card>
        <h3 class="manage-title">归属信息</h3>
        <hr/>

        <div class="project-owner-info">
          <div class="owener-info-item">
            <p><b>拥有者:</b>{{projectDetail?.username}}</p>
          </div>
          <div class="owener-info-item">
            <p><b>职位:</b>{{projectDetail?.role === 'pm' ? '项目经理' : projectDetail?.role}}</p>
          </div>
          <div class="owener-info-item">
            <p><b>邮箱:</b>{{projectDetail?.email}}</p>
          </div>
        </div>
      </mat-card>

      <mat-card class="owner-card">
        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" *ngIf="projectDetail">

          <div class="pm-activity-body-title">
            <p>信息详情</p>
            <div class="pm-activity-btnGroup" *ngIf="isOperateProject">
              <button mat-button color="primary" (click)="cancelModify()">取消</button>
              <button mat-button type="submit" [disabled]="!form.valid" color="primary">保存</button>
            </div>
          </div>
          <div class="pm-activity-body-content">
            <mat-form-field>
              <input matInput formControlName="name" [(ngModel)]="projectDetail.name" name="project" #input
                     placeholder="项目名称" [readonly]="!isOperateProject">
              <mat-hint align="end">{{input.value?.length || 0}}</mat-hint>
              <mat-error *ngIf="form.controls['name'].hasError('required')">
                项目名称必填
              </mat-error>
              <mat-error *ngIf="form.controls['name'].hasError('minlength')">
                项目名称不少于2个字符
              </mat-error>
            </mat-form-field>

            <mat-form-field>
              <textarea matInput formControlName="detail" [(ngModel)]="projectDetail.detail" name="detail" #textarea
                        placeholder="项目描述" [readonly]="!isOperateProject"></textarea>
              <mat-hint align="end">{{textarea.value?.length || 0}}</mat-hint>
            </mat-form-field>


            <mat-form-field *ngIf="isOperateProject">
              <mat-select formControlName="type"  [(ngModel)]="projectDetail.type" placeholder="项目类型">
                <mat-option *ngFor="let type of object.keys(projectType)" [value]="type">
                  {{ projectType[type] }}
                </mat-option>
              </mat-select>
              <mat-error *ngIf="form.controls['type'].hasError('required')">
                项目类型必选
              </mat-error>
            </mat-form-field>

            <mat-form-field *ngIf="!isOperateProject">
              <input matInput name="type" [value]="projectType[projectDetail.type]" [readonly]="!isOperateProject">
            </mat-form-field>

            <div class="date-picker">
              <mat-form-field>
                <input matInput formControlName="startDate" [(ngModel)]="projectDetail.startDate" name="startPicker"
                       [matDatepicker]="startPicker" placeholder="创建时间" [readonly]="!isOperateProject">
                <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
                <mat-datepicker #startPicker></mat-datepicker>
              </mat-form-field>
              <mat-form-field>
                <input matInput formControlName="endDate" [(ngModel)]="projectDetail.endDate" name="endPicker"
                       [matDatepicker]="endPicker" placeholder="结束时间" [readonly]="!isOperateProject">
                <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
                <mat-datepicker #endPicker></mat-datepicker>
              </mat-form-field>
            </div>
          </div>
        </form>
      </mat-card>

      <mat-card>
        <h3 class="manage-title">人员管理</h3>
        <hr/>
        <div *ngIf="isOperateProject">
          <people-manage
            *ngIf="members"
            [dataListModel]="dataListModel"
            [searchList]="searchList"
            [displayOnly]="false"
            [roleField]="'username'"
            [(datas)]="members.data"
            (outDelete)="delete($event)"
            (outCreate)="create($event)"
            (outSearch)="search($event)">
          </people-manage>
        </div>

        <div *ngIf="!isOperateProject">
          <people-manage
            *ngIf="members"
            [dataListModel]="dataListModel"
            [(datas)]="members.data">
          </people-manage>
        </div>
      </mat-card>
    </div>
  </mat-card>
</div>
